<template>
  <el-dialog
    v-model="dialogVisible"
    title="详情"
    width="30%"
    style="min-width: 300px; max-width: 500px"
    draggable
  >
    <el-form label-width="80px">
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="门店名称">
            <el-input
              size="large"
              placeholder="门店名称"
              clearable
              v-model="requestParam.name"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="门店类型">
            <el-select
              disabled
              v-model="requestParam.typeCode"
              placeholder="请选择"
              size="large"
            >
              <el-option
                v-for="item in goodsJs.getGoodsStoreTypeCodeList()"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="门店地址">
            <el-input
              size="large"
              placeholder="门店地址"
              clearable
              v-model="requestParam.address"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="面积">
            <el-input
              size="large"
              placeholder="面积"
              clearable
              v-model="requestParam.area"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="开业时间">
            <el-date-picker
              disabled
              v-model="requestParam.gmtOpen"
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              size="large"
              :picker-options="{
                firstDayOfWeek: 1,
                disabledDate: (time) => {
                  return time.getTime() > Date.now();
                },
              }"
              format="YYYY/MM/DD"
              value-format="x"
            ></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="电话">
            <el-input
              size="large"
              placeholder="电话"
              clearable
              v-model="requestParam.phone"
              autocomplete="off"
              disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, defineEmits, defineExpose, watch } from "vue";
let dialogVisible = ref(false);
import $kt from "@/vueKantboot";
import { ElLoading, ElMessage } from "element-plus";
import { de, fa } from "element-plus/es/locale";
import goodsJs from "@/commonJs/goods";

// emits
let emits = defineEmits(["submit"]);

let requestParamStart = {
  id: null,
  // 门店名称
  name: null,

  // 门店类型编码
  typeCode: null,

  // 门店地址
  address: null,
  // 面积
  area: null,
  enableStatus: null,

  // 开业时间
  gmtOpen: null,
  // 电话
  phone: null,
};

let requestParam = ref(JSON.parse(JSON.stringify(requestParamStart)));

// 是否文件正在上传
let isFileUploading = ref(false);

/**
 * 打开弹窗
 */
let open = (param: any) => {
  if (param) {
    requestParam.value = JSON.parse(JSON.stringify(param));
  }

  if (requestParam.value.barCode != null && requestParam.value.barCode != "") {
  }

  dialogVisible.value = true;
};

let fileChange = (json: any) => {
  requestParam.value.fileIdOfImgArrStr = json.str;
};

// 监听条形码变化
watch(
  () => requestParam.value.barCode,
  (newValue, oldValue) => {}
);

let submit = () => {
  const loading = ElLoading.service({
    lock: true,
    text: "Loading",
    background: "rgba(0, 0, 0, 0.7)",
  });

  $kt.request
    .request({
      url: "/business-goods-web/admin/goodsStore/save",
      method: "post",
      data: requestParam.value,
    })
    .then((res) => {
      if (res.data.success) {
        ElMessage({
          message: "保存成功",
          type: "success",
        });
        dialogVisible.value = false;

        loading.close();
        // 提交
        emits("submit");
        dialogVisible.value = false;
        requestParam.value = JSON.parse(JSON.stringify(requestParamStart));
        return false;
      }
      ElMessage({
        message: res.data.errMsg,
        type: "error",
      });
    });
};

let goodsSelect = ref();

let toSelectType = (param: any) => {
  goodsSelect.value.open();
};

let goodsType = ref({
  id: null,
  name: null,
});

let goodsSelectSelect = (res: any) => {
  requestParam.value.typeId = res.id;
  goodsType.value = res;
};

// 暴露给父组件的方法
defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.img-uploaded {
  cursor: pointer;
}

.img-uploaded:hover {
  opacity: 0.8;
}
</style>
